@page "/Service"
@using Rental.Data
@using Rental.Data.Context
@inject RentalContext RentalContext

<Navigation/>

<section id="car-rental-bg-image-sedan" class="p-5">
    <div class="text-center text-white m-sm-5 px-sm-5">
        <h1 class="fw-light">Services</h1>
        <p class="fw-bold text-muted">Find out more about our services</p>
    </div>
</section>

<section class="p-5 mx-lg-5">
    <div class="row g-5 px-lg-5 mx-lg-5 row-cols-1 row-cols-sm-3 text-center">
        <div class="col">
            <div class="border border-3 py-5 mx-lg-5">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                     class="bi bi-person text-muted" viewBox="0 0 16 16">
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                <h5 class="my-4">Car With Personal Driver</h5>
                <p class="text-muted px-3">Lorem ipsum dolor sit amet, consectetur adipisicing in est ante in nibh
                    mauris</p>
            </div>
        </div>

        <div class="col">
            <div class="border border-3 py-5 mx-lg-5">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                     class="bi bi-person text-muted" viewBox="0 0 16 16">
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                <h5 class="my-4">MPV Rental</h5>
                <p class="text-muted px-3">Cursus in hac habitasse platea adipiscing commodo cursus mattis molestie</p>
            </div>
        </div>

        <div class="col">
            <div class="border border-3 py-5 mx-lg-5">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                     class="bi bi-person text-muted" viewBox="0 0 16 16">
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                <h5 class="my-4">SUV Rental</h5>
                <p class="text-muted px-3">Pharetra pharetra massa massa ultricies mi nunc consequat morbi quis
                    commodo.</p>
            </div>
        </div>

        <div class="col">
            <div class="border border-3 py-5 mx-lg-5">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                     class="bi bi-person text-muted" viewBox="0 0 16 16">
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                <h5 class="my-4">Limousine Rental</h5>
                <p class="text-muted px-3">Turpis egestas pretium aenean pharetra magna ac magnis dis odio aenean sed
                    adipiscing</p>
            </div>
        </div>

        <div class="col">
            <div class="border border-3 py-5 mx-lg-5">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                     class="bi bi-person text-muted" viewBox="0 0 16 16">
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                <h5 class="my-4">Car Leasing</h5>
                <p class="text-muted px-3">Aliquet nec ullamcorper sit amet. Sit amet venenatis urna sed lectus
                    vestibulum
                    mattis</p>
            </div>
        </div>

        <div class="col">
            <div class="border border-3 py-5 mx-lg-5">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                     class="bi bi-person text-muted" viewBox="0 0 16 16">
                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                <h5 class="my-4">One-way Car Rental</h5>
                <p class="text-muted px-3">Lectus arcu bibendum at varius vel pharetra vel turpis nunc eget</p>
            </div>
        </div>
    </div>
</section>

<Footer></Footer>